<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="../../scripts/ace-tree.js"></script>
		<script src="../../scripts/ace-template.js"></script>
		<script src="../../scripts/ace-event.js"></script>
		<title>ace tree examples</title>
	</head>
	<body>
		<ul>
			<script id="movieTemplate" type="text/template">
			<li><a href="#{url}" target="_blank">#{title}:#{url}</a></li>
			</script>
		</ul>
		<div id="toolbar">
			<button cmd="sortTitle">按标题排序</button>
			<button cmd="sortUrl">按url排序</button>
		</div>
		<script>
void function() {
	var movieList = [
		{
			title: "建党伟业",
			url: "http://top.baidu.com/detail.php?b=26&w=%BD%A8%B5%B3%CE%B0%D2%B5"
		},
		{
			title: "变形金刚3",
			url: "http://top.baidu.com/detail.php?b=26&w=%B1%E4%D0%CE%BD%F0%B8%D53",
			isnew: true
		},
		{
			title: "功夫熊猫2",
			url: "http://top.baidu.com/detail.php?b=26&w=%B9%A6%B7%F2%D0%DC%C3%A82"
		},
		{
			title: "加勒比海盗4",
			url: "http://top.baidu.com/detail.php?b=26&w=%BC%D3%C0%D5%B1%C8%BA%A3%B5%C14"
		},
		{
			title: "3d肉蒲团",
			url: "http://top.baidu.com/detail.php?b=26&w=3d%C8%E2%C6%D1%CD%C5"
		}
	];
	
	var movieTree = AceTree.create({
		fieldIdentifier: 'title',
		parent: document.getElementById('movieTemplate').parentNode,
		onreader: function(node){
			return AceTemplate.format('movieTemplate', node.data);
		}
	});
	
	movieTree.loadChilds(movieList);
	
	AceEvent.on('toolbar', function(command){
		switch(command){
			case 'sortTitle':
				movieTree.onsort = function(a, b){
					return ('' + a.data.title).localeCompare('' + b.data.title);
				};
				movieTree.sort();
				break;
			case 'sortUrl':
				movieTree.sort(function(a, b){
					return ('' + a.data.url).localeCompare('' + b.data.url);
				});
				break;
		}
	});
}();
		</script>
	</body>
</html>